<template>
  <m-layout type="primary" class="score-standard">
    <mt-header slot="header" :title="title">
      <m-header-back slot="left"/>
    </mt-header>
    <div slot="body" class="content-wrapper">
      <e-heading>{{scoreStandard.testDesc}}评分标准</e-heading>
      <div class="standard-detail-wrapper" v-if="scoreStandard.standardList && scoreStandard.standardList.length">
        <m-flexbox class="standard-detail-item" v-for="item in scoreStandard.standardList" :key="item.id">
          <m-flexbox-item>{{item.testGrade}}</m-flexbox-item>
          <div class="item-value">
            <span v-if="!item.minValue">{{item.symbol}} {{item.maxValue}}</span>
            <span v-else-if="!item.maxValue">{{item.symbol}} {{item.minValue}}</span>
            <span v-else>{{item.minValue}} {{item.symbol}} {{item.maxValue}}</span>
            次
          </div>
        </m-flexbox>
      </div>
      <ul class="score-detail-wrapper" v-if="itemScoreRuleInfo.scoureDetaiList">
        <li class="score-detail-item" v-for="(item, index) in itemScoreRuleInfo.scoureDetaiList" :key="index">
          {{`${index + 1}、${item.testDetail} ${item.score} ${item.unit}`}}
        </li>
      </ul>
      <div class="standard-content" v-if="testStandardData">
        <div class="text" v-html="testStandardData.content"></div>
        <img class="image" v-if="testStandardData.imageUrl" :src="testStandardData.imageUrl"/>
        <div class="text" v-if="testStandardData.other" v-html="testStandardData.other"></div>
      </div>
    </div>
  </m-layout>
</template>
<script>
import { mapState } from 'vuex'
import standardItemData from './StandardData'

export default {
  data () {
    return {
      searchDate: '',
      checkboxValue: [],
      options: [],
      score: ''
    }
  },
  computed: {
    ...mapState({
      scoreStandard: state => state.score.scoreStandard,
      itemScoreRuleInfo: state => state.score.itemScoreRuleInfo
    }),
    query () {
      return this.$route.query
    },
    title () {
      return `${this.query.testModeName}评分标准（${this.query.testAgeName}）`
    },
    testStandardData () {
      let UData = standardItemData[this.query.testAgeName] || {}
      let data = UData[`data${this.query.testContentId}`]
      return data
    }
  },
  created () {
    this.initData()
  },
  methods: {
    initData () {
      this.getScoreStandard()
      this.getItemScoreRuleInfo()
    },
    getItemScoreRuleInfo () {
      let query = this.query
      this.$store.dispatch('score/itemScoreRuleInfo', {
        testDateStr: new Date().format('yyyy-MM-dd'),
        testMethodId: query.testContentId,
        testModeId: query.testItemId,
        studentId: query.studentId,
        ageDictionarieId: query.testAgeId,
        sportType: 3002 // 写死
      })
    },
    getScoreStandard () {
      let query = this.query
      this.$store.dispatch('score/scoreStandard', {
        orgUserId: query.orgUserId,
        itemId: query.testContentId,
        ageId: query.testAgeId
      })
    },
    handleBack () {
      history.back()
    }
  }
}
</script>
<style lang="scss" scoped>
  .score{
    &-standard{
      .content-wrapper{
        .standard-detail-wrapper{
          .standard-detail-item{
            padding: 0 .3rem;
            height: 1.1rem;
            box-sizing: border-box;
            border-bottom: .01rem solid $border-color-base;
            .item-value{
              color: $color-black-base;
            }
          }
        }
        .score-detail-wrapper{
          margin-top: .14rem;
          line-height: .4rem;
          padding: 0 .4rem;
          .score-detail-item{
            font-size: $font-size-small;
            color: $color-black-base;
          }
        }
        .standard-content{
          margin-top: .24rem;
          padding: 0 .24rem;
          color: $color-black-base;
        }
      }
    }
  }
</style>
